<template>
  <div class="tag-wrapper">
    <div class="title">目前共计{{$root.countNumber.tag}}个标签</div>
    <div class="tag-list">
      <ul>
        <router-link v-for="v in list" :key="v._id" tag="li" :to="`/article?tag=${v._id}`" :style="{'font-size': v.size}">{{v.name}}</router-link>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Tag',
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getList()
  },
  mounted () {
  },
  methods: {
    async getList () {
      const {data} = await this.$http.get('/v1/tag')
      const sizes = ['14', '16', '18', '23', '25', '28', '30', '31', '33']
      for (let i of data.list) {
        i.size = sizes[Number.parseInt((Math.random() * 10))] + 'px'
      }
      this.list.push(...data.list)
      console.log(data)
    }
  }
}
</script>

<style>

</style>
